<template>
  <div class="order">
    <Title></Title>
    <!-- 订单部分 -->
    <div class="order_box">
      <div class="inner">
        <!-- 收货地址 -->
        <div class="order_adress">
          <div class="order_adresstit">
            收货地址
          </div>
          <div class="order_none" v-if="adressarr.length==0" @click="pageurl">
            添加地址
          </div>
          <div class="order_adressitem" v-else v-for="(item,index) in adressarr"
            :class="[adressid==index?'adressactive':'']" @click="adressfn(index,item.id)">
            <div class="order_adresscontent one-txt-cut">
              {{item.area}}{{item.address}}
            </div>
            <div class="order_adressname one-txt-cut">
              {{item.name}}
            </div>
            <div class="order_adressphone one-txt-cut">
              {{item.phone}}
            </div>
          </div>
        </div>
        <!-- 确认订单信息 -->
        <div class="order_car">
          确认订单信息
        </div>
        <div class="car_item" v-for="item in shoparr">
          <div class="car_img">
            <img v-if="item.goods_sku_spec_show=='单规格'" :src="[item.goods_img]" alt="">
            <img v-else :src="[item.goods_sku_image]" alt="" srcset="">
            <div class="car_name">
              {{item.goods_name}}
            </div>
          </div>
          <div class="car_price">
            ￥{{item.goods_sku_price}}
          </div>
          <div class="car_num">
            x{{item.goods_num}}
          </div>
        </div>
        <div class="car_total">
          <div class="total_mail">
            已选商品{{total.goods_num}}件&nbsp;合计：<span>￥{{total.goods_price}}</span>
          </div>
          <div class="total_mail">
            运费<span>￥{{total.logistics_price}}</span>
          </div>
        </div>
        <!-- 优惠券 -->
        <div class="order_discount" @click="discountdatafn(couponarr.length)">
          {{couponarr.length==0?"无优惠劵":"优惠劵"+couponarr.length+'张'}} &nbsp;>
          <div class="discount_info" v-if="discountdata">
            <div class="discount_infotit">
              <span>已领取{{couponarr.length}}张优惠券</span>
              <span @click.stop="discountclose()">x</span>
            </div>
            <div class="discount_infoitem" v-for="(item,index) in couponarr"
              @click.stop="discountfn(index,item.coupon_id)">
              <span :class="[discountid==index?'discountred':'']">￥{{parseInt(item.coupon_price)}}></span>
              <div class="discount_inforight" :class="[discountid==index?'discountactive':'']">
                <div class="discount_info_price">
                  店铺券满{{parseInt(item.coupon_floor)}}减{{parseInt(item.coupon_price)}}
                </div>
                <div class="discount_infotime">
                  {{item.coupon_start}}至{{item.coupon_stop}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 留言 -->
        <div class="order_textarea">
          <textarea placeholder="买家留言......" v-model="order.order_message" @blur="changearea()" cols="30"
            rows="10"></textarea>
        </div>
        <!-- 提交订单 -->
        <div class="order_submit" @click="ordersubmit()">
          提交订单
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Title from "../../components/title.vue"
  import {
    getorderapi,
    ordercommitapi
  } from "../../api/http.js"
  export default {
    name: 'order',
    components: {
      Title
    },
    data() {
      return {
        adressid: 0,
        discountid: 0,
        discountdata: false,
        shoparr: [],
        couponarr: [],
        adressarr: [],
        total: {},
        orderarr: {
          goods_sku_id: "",
          goods_num: "",
          coupon_id: ""
        },
        order: {
          collapse_shipping_address_id: "",
          goods_sku_id: "",
          goods_num: "",
          order_message: "",
          coupon_id: ""
        },
      }
    },
    created() {
      console.log();
      this.orderarr = JSON.parse(this.$route.query.order)
      this.order = JSON.parse(this.$route.query.order)
      this._getorder(this.orderarr)

    },
    methods: {
      // 订单页面的数据
      async _getorder(star) {
        const res = await getorderapi(star)
        console.log(res.data.data.collapse_shipping_address);
        if (res.data.code == 200) {
          this.shoparr = res.data.data.goods
          this.couponarr = res.data.data.coupon
          this.adressarr = res.data.data.collapse_shipping_address
          this.total = res.data.data.total
          this.order.collapse_shipping_address_id = this.adressarr[0].id
        } else {
          this.shoparr = []
          this.couponarr = []
          this.adressarr = []
        }
      },
      // 页面跳转
      pageurl(){
        this.$router.push({
          path:"/layout/adress"
        })
      },
      // 提交订单
      async ordersubmit() {
        console.log(this.order);
        const res = await ordercommitapi(this.order)
        if (res.data.code == 200) {
          this.$message(res.data.msg)
          this.$router.push({
            path:"/pay",
            query: {
              order_id: res.data.data.order_id
            }
          })

        } else {
          this.$message(res.data.msg)
        }
        console.log(res);
      },
      // 买家留言
      changearea() {
        var addressreg = /^[^ ]/
        // if (this.order.order_message === undefined) {
        //   return this.$message("请输入正确的买家留言")
        // }
        addressreg.test(this.order.order_message) ? this.$message("输入正确") : this.$message("请输入正确的买家留言")
      },
      // 地址的选择
      adressfn(star, id) {
        this.order.collapse_shipping_address_id = id
        this.adressid = star
      },
      // 优惠券
      async discountfn(star, id) {
        this.discountid = star
        this.orderarr.coupon_id = id
        const res = await getorderapi(this.orderarr)
        if (res.data.code == 200) {
          this.$message(res.data.msg)
          this.discountdata = !this.discountdata
          this.total = res.data.data.total
          this.order.coupon_id = id
        } else {
          this.$message(res.data.msg)
          this.discountdata = !this.discountdata
        }
      },
      discountdatafn(star) {
        if (star == 0) {
          return
        }
        this.discountdata = !this.discountdata
      },
      discountclose() {
        this.discountdata = !this.discountdata
      }
    }
  }
</script>

<style lang="less">
  .order_box {
    width: 100%;
    padding-bottom: 50px;

    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 0 85px;
      box-sizing: border-box;

      // 收货地址
      .order_adress {
        margin-bottom: 20px;

        .order_adresstit {
          font-weight: 700;
          font-size: 16px;
          line-height: 40px;
          height: 40px;
          margin-bottom: 15px;
        }

        .adressactive {
          background: #EAF8FF;
          border: 1px solid #9EDFFF;
        }

        .order_adressitem {
          width: 100%;
          height: 40px;
          font-size: 14px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 0 50px;
          box-sizing: border-box;
          margin-bottom: 20px;
          border: 1px solid #CCCDCE;

          .order_adresscontent {
            width: 70%;
          }

          .order_adressname {
            width: 15%;
          }

          .order_adressphone {
            width: 15%;
          }
        }

        .order_none {
          width: 136px;
          height: 40px;
          background: #FF4444;
          border-radius: 4px;
          font-weight: 400;
          font-size: 16px;
          line-height: 40px;
          color: #FFFFFF;
          text-align: center;
          margin: 0 auto;
        }
      }

      // 确认订单信息
      .order_car {
        font-weight: 700;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        margin-bottom: 15px;
      }

      .car_total {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        font-size: 16px;

        .total_mail {
          span {
            color: #FF4444;
            margin-left: 10px;
            font-weight: 500;
          }
        }
      }

      .car_item {
        width: 100%;
        height: 120px;
        border: 1px solid #CCCDCE;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .car_img {
          width: 620px;
          height: 100%;
          padding: 20px 50px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }

          .car_name {
            font-size: 16px;
            line-height: 22px;
            color: #292929;
            padding-left: 10px;
          }
        }

        .car_price {
          flex: 1;
          font-size: 16px;
          color: #FF4444;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-left: 1px solid #CCCDCE;
          border-right: 1px solid #CCCDCE;
        }

        .car_num {
          flex: 1;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #292929;
        }

      }

      // 优惠券
      .order_discount {
        margin-top: 20px;
        width: 117px;
        height: 40px;
        border: 1px solid #FF4444;
        border-radius: 4px;
        line-height: 40px;
        text-align: center;
        color: #FF4444;
        font-size: 16px;
        cursor: pointer;
        position: relative;

        .discount_info {
          color: #292929;
          position: absolute;
          background-color: #fff;
          right: -350px;
          top: 0;
          width: 340px;
          border: 0.75px solid #FF4444;
          border-radius: 4px;
          padding: 0 10px;
          box-sizing: border-box;

          .discount_infotit {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            border-bottom: 0.75px solid #CCCDCE;

            span {
              &:nth-of-type(2) {
                width: 40px;
                height: 40px;
                cursor: pointer;
              }
            }
          }

          .discount_infoitem {
            padding-top: 10px;
            box-sizing: border-box;
            width: 100%;
            height: 70px;
            margin-bottom: 10px;

            .discountred {
              background: rgba(255, 68, 68, 0.16);
              border: 1px dashed #FF4444;
              color: #FF4444;
            }

            span {
              display: inline-block;
              width: 60px;
              height: 30px;
              border-radius: 4px;
              font-size: 14px;
              line-height: 30px;
              letter-spacing: 2px;
              background: rgba(196, 196, 196, 0.55);
              border: 1px dashed #C4C4C4;
              color: #fff;
              float: left;
              margin-top: 10px;
            }

            .discountactive {
              color: #FF4444 !important;
            }

            .discount_inforight {
              font-size: 12px;
              margin-left: 10px;
              color: #C4C4C4;
              float: left;

              .discount_info_price {
                text-align: left;
                height: 30px;
                line-height: 30px;
              }

              .discount_infotime {
                text-align: left;
                height: 30px;
                line-height: 30px;
              }
            }
          }
        }

      }

      .order_textarea {
        width: 588px;
        height: 113px;
        border: 1px solid #CCCDCE;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 20px;
        margin-bottom: 40px;

        textarea {
          width: 100%;
          height: 100%;
          border: none;
          outline: none;

        }
      }

      .order_submit {
        width: 136px;
        height: 40px;
        background: #FF4444;
        border-radius: 4px;
        font-size: 16px;
        line-height: 40px;
        color: #FFFFFF;
        text-align: center;
        margin: 0 auto;
        cursor: pointer;
      }
    }
  }
</style>
